<template>
	<view class="container">
		<view class="l1">
			<image src="/static/icons/login.png" mode="aspectFit"></image>
		</view>

		<u--form labelPosition="left" :model="userInfo" :rules="rules" ref="uForm">
			<view class="input-group">
				<view class="input-label">
					用户名
				</view>
				<u-form-item prop="userName" :borderBottom="false" ref="item1" class="form-item">
					<u--input placeholder="请输入用户名" v-model="userInfo.userName" class="custom-input"></u--input>
				</u-form-item>
				<view class="input-label">
					密码
				</view>
				<u-form-item prop="password" :borderBottom="false" ref="item1" class="form-item">
					<u--input placeholder="请输入密码" v-model="userInfo.password" type="password"
						class="custom-input"></u--input>
				</u-form-item>
			</view>
		</u--form>

		<view class="btn-group">
			<u-button type="primary" text="登录" @click="submit" class="login-btn"></u-button>
			<u-button type="success" text="注册" class="register-btn"></u-button>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import http from "../../http.js"
	export default {
		data() {
			return {
				userInfo: {
					userName: 'student',
					password: '',
					remember: false
				},
				rules: {
					'userName': {
						type: 'string',
						required: true,
						message: '请填写用户名',
						trigger: ['blur', 'change']
					},
					'password': {
						type: 'string',
						required: true,
						message: '请填密码',
						trigger: ['blur', 'change']
					}
				}
			}
		},
		methods: {
			submit() {
				this.$refs.uForm.validate().then(res => {
					http({
						url: "/api/user/login",
						method: "post",
						data: this.userInfo
					}).then(res => {
						if (res.code === 1) {
							this.$refs.uToast.show({
								type: "success",
								message: "登陆成功",
								duration: 1000,
								complete() {
									uni.switchTab({
										url: "/pages/home/home",
									});
								},
							});
						} else {
							this.$refs.uToast.show({
								type: "error",
								message: res.message,
								duration: 1000,
							});
						}
					});
				}).catch(errors => {

				})
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		}
	}
</script>

<style>
	/* 修复小程序样式问题 */
	page {
		background-color: #F7F7F7;
	}



	.container {
		padding: 0 30rpx;
	}

	.l1 {
		width: 100%;
		height: 300rpx;
		/* 适当减小高度 */
		margin-bottom: 40rpx;
	}

	.input-group {
		margin: 0;
	}

	.input-label {
		font-size: 28rpx;
		color: #333;
		margin: 20rpx 0 8rpx 10rpx;
		/* 减小标签与输入框的间距 */
		font-weight: 500;
	}

	/* 关键修复：解决小程序输入框过大和偏移问题 */
	.form-item {
		margin-bottom: 20rpx;
	}

	.custom-input {
		background-color: #FFFFFF;
		border-radius: 12rpx;
		padding: 20rpx 24rpx !important;
		/* 统一内边距 */
		height: 80rpx !important;
		/* 固定高度 */
		line-height: 1.5;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
		border: 1rpx solid #e4e7ed !important;
		/* 添加边框 */
		
	}

	/* 针对微信小程序的特殊样式调整 */
	/* #ifdef MP-WEIXIN */
	.custom-input {
		padding: 18rpx 24rpx !important;
		height: 76rpx !important;
	}

	.u-input__content__field-wrapper__field {
		min-height: auto !important;
		line-height: 1.4 !important;
		padding: 0 !important;
	}

	/* #endif */

	.btn-group {
    margin: 60rpx 0 0;
    gap: 40rpx; /* 将间距从30rpx增加到40rpx */
    display: flex;
    flex-direction: column;
	}

	.login-btn,
	.register-btn {
		height: 90rpx !important;
		border-radius: 12rpx !important;
		font-size: 32rpx !important;
		font-weight: 500 !important;
	}

	.login-btn {
		background: linear-gradient(to right, #3a8be6, #1c6bce) !important;
		box-shadow: 0 4rpx 12rpx rgba(58, 139, 230, 0.3);

	}

	.register-btn {
		background: linear-gradient(to right, #19be6b, #07c160) !important;
		box-shadow: 0 4rpx 12rpx rgba(25, 190, 107, 0.3);
	}
</style>